import { ClockBox, Time, Dates, Greeting, SysInfoTable, WeatherBox, WeatherImage, Temperature } from "./styles.jsx";
import settings from "../settings.json";

export const Clock = ({ datetime }) => {
	return (
		<ClockBox>
			<Time>
				{datetime.hour}:{datetime.minutes}
			</Time>
			<Dates>{datetime.displayDate}</Dates>
			<Greeting>
				{datetime.greeting}, {datetime.username}
			</Greeting>
		</ClockBox>
	);
};

export const Weather = ({ weather }) => {
	if (!weather) {
		return (
			<WeatherBox>
				<WeatherImage src={settings.api.url_icon.replace("ICON_ID", "03d")} />
				<Temperature>
					...° <span>fetching data...</span>
				</Temperature>
			</WeatherBox>
		);
	}
	const temp = Math.round(weather.temp);
	return (
		<WeatherBox>
			<WeatherImage src={settings.api.url_icon.replace("ICON_ID", weather.icon)} />
			<Temperature>
				{temp}° <span>{weather.description}</span>
			</Temperature>
		</WeatherBox>
	);
};

export const SysInfo = ({ sysinfo }) => {
	return (
		<SysInfoTable>
			<tr>
				<td rowSpan={2}>
					<strong>Load Avg</strong>
				</td>
				<td>
					<span>1 min</span>
				</td>
				<td>
					<span>5 min</span>
				</td>
				<td>
					<span>15 min</span>
				</td>
			</tr>
			<tr>
				<td>{sysinfo.load[0]}</td>
				<td>{sysinfo.load[1]}</td>
				<td>{sysinfo.load[2]}</td>
			</tr>
			<tr>
				<td rowSpan={2}>
					<strong>CPU</strong>
				</td>
				<td>
					<span>user</span>
				</td>
				<td>
					<span>sys</span>
				</td>
				<td>
					<span>idle</span>
				</td>
			</tr>
			<tr>
				<td>{sysinfo.cpu[0]}%</td>
				<td>{sysinfo.cpu[1]}%</td>
				<td>{sysinfo.cpu[2]}%</td>
			</tr>
			<tr>
				<td rowSpan={2}>
					<strong>Processes</strong>
				</td>
				<td>
					<span>running</span>
				</td>
				<td>
					<span>sleeping</span>
				</td>
				<td>
					<span>threads</span>
				</td>
			</tr>
			<tr>
				<td>{sysinfo.processes[1]}</td>
				<td>{sysinfo.processes[2]}</td>
				<td>{sysinfo.processes[3]}</td>
			</tr>
			<tr>
				<td rowSpan={2}>
					<strong>Memory</strong>
				</td>
				<td>
					<span>used</span>
				</td>
				<td>
					<span>free</span>
				</td>
			</tr>
			<tr>
				<td>{sysinfo.memory[0]}</td>
				<td>{sysinfo.memory[3]}</td>
			</tr>
		</SysInfoTable>
	);
};
